<template>
  <div>
    <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>系统管理</el-breadcrumb-item>
        <el-breadcrumb-item>部门管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="margin-top:20px">
     <el-input placeholder="请输入部门查询" style="width:500px" v-model="name" ></el-input>
       <el-button type="primary" icon="el-icon-search" @click="handleSearch"></el-button>
       <el-button type="success" icon="el-icon-circle-plus-outline" @click="handleAdd">添加</el-button>
       <el-button  icon="el-icon-download">导出</el-button>
      <!-- 表格 -->
      <el-table border 
      :data="roleList" 
      ref="multipleTable" 
      style="width:95%;margin:20px 5px;"
      >
     
      <el-table-column label="ID"  width="100">
        <template slot-scope="scope">
          {{ scope.row.id }}
        </template>
      </el-table-column>
      <el-table-column label="办公电话"  width="200">
        <template slot-scope="scope">
          {{ scope.row.phone}}
        </template>
      </el-table-column>
      <el-table-column label="部门名"  width="200">
        <template slot-scope="scope">
          {{ scope.row.name }}
        </template>
      </el-table-column>
      
      <el-table-column label="人数"  width="200" sortable prop="total">
        <template slot-scope="scope">
         <span class="total"> {{ scope.row.total}}人</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间"  width="300" sortable prop="createTime">
        <template slot-scope="scope">
          {{ scope.row.createTime}}
        </template>
      </el-table-column>
      <el-table-column label="修改时间"  width="300" sortable prop="modifiedTime">
        <template slot-scope="scope">
          {{ scope.row.modifiedTime}}
        </template>
      </el-table-column>
      <el-table-column label="地址"  width="300">
        <template slot-scope="scope">
          {{ scope.row.address}}
        </template>
      </el-table-column>
      <el-table-column label="操作" width="300">
        <template slot-scope="scope">
          
          <el-button size="mini" type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
          <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDel(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
      </el-table>
               <!-- 分页区域 -->
      <div class="pagination-container" style="margin-right:60px">
        <el-pagination
                layout="total,sizes,prev, pager, next,jumper"
                :total="total"
                :page-size="pageSize"
                :current-page="pageNum"
                :page-sizes="[5,10,15]"
                @current-change="handlePageChange"
                @size-change="handleSizeChange"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 编辑和删除 -->
    <el-dialog
  :title="isEdit?'编辑用户':'添加用户'"
  :visible="isShow"
  width="50%"
  center
  :before-close="handleClose">
  <el-form :model="department"  class="form" style="margin-left:100px" >
      <el-form-item label="部门名称">
        <el-input  type="text" v-model="department.name" style="width:600px" ></el-input>
      </el-form-item>
      <el-form-item label="办公电话">
        <el-input  type="text" v-model="department.phone" style="width:600px" ></el-input>
      </el-form-item>   
      <el-form-item label="办公地址">
        <el-input type="textarea" v-model="department.address" style="width:600px" ></el-input>
      </el-form-item>
    </el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="handleClose">取 消</el-button>
    <el-button type="primary" @click="handleSure">确 定</el-button>
  </span>
    </el-dialog>
  </div>
</template>

<script>
let department={
    name:"",
    phone:"",
    address:""
}
export default {
    data(){
      return{
        department: Object.assign({}, department),
        roleList:[],
        pageSize:5,
        pageNum:1,
        total:null,
        name:"",//部门名称
        isEdit:false,
        isShow:false,

      }
    },
    created(){
      this.getDepartList()
    },
    methods:{
      //获取部门列表信息
      async getDepartList(){
          let res =  await this.$http.get("/department/findDepartmentList?pageSize="+this.pageSize+"&pageNum="+this.pageNum+"&name="+this.name.trim());
          console.log(res)
          if(res.status===200){
            this.roleList = res.data.data.rows
            this.total = res.data.data.total
            this.$message.success("获取部门管理列表成功")
          }else{
            this.$message.warning("获取部门管理列表失败")
          }
      },
            //页码变化
   handlePageChange(val){
       this.pageNum = val
       this.getDepartList()
     },
     //点击一页显示多少条
     handleSizeChange(val){
      this.pageSize = val
      this.pageNum = 1
      this.getDepartList()
     },
     //头部搜索功能
     handleSearch(){
       console.log("aaa")
       this.getDepartList()
     },
     //点击添加
     handleAdd(){
        this.isShow = true
     },
     //点击编辑
       async handleEdit(row){
           let res =  await this.$http.get("/department/edit/"+row.id);
           console.log(res)
           if(res.data.code===200){
            this.isShow = true
             this.isEdit = true
            this.department = res.data.data       
           }
          
     },
     //取消添加和编辑
     handleClose(){
        this.isShow = false
        this.isEdit = false
        this.department = Object.assign({}, department)
     },
     //确定添加和编辑
     async handleSure(){
        if(this.isEdit){
          //编辑
               let res =  await this.$http.put("/department/update/"+this.department.id,this.department);
           if(res.data.code==200){
             this.isEdit = false
               this.isShow = false
              this.$message.success("部门编辑成功")
              this.getDepartList()
              this.department = Object.assign({}, department)
           }else{
             this.$message.warning(res.data.msg)
           }
        }else{
          //添加
          let res =  await this.$http.post("department/add",this.department);
          console.log(res)
          if(res.data.code===200){
            this.$message.success("添加用户成功")
            this.isShow = false
            this.department = Object.assign({}, department)
            this.getDepartList()
          }else{
            this.$message.warning(res.data.msg)
          }
        }
     },
     //删除
     handleDel(id){
            this.$confirm('确定要删除吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(async() => {
          let res =  await this.$http.delete(`/department/delete/${id}`);
         
          if(res.data.code===200){
            this.getDepartList()
            this.$message.success("删除成功")
          }else{
            this.$message.warning("删除失败")
          }
         
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
     }
    }
}
</script>

<style lang="less" scoped>
.total{
  display: inline-block;
  color:#2D8CF0 ;
  border: 1px solid #2D8CF0;
  width: 40px;
  border-radius: 5px;
  text-align: center;
}
</style>

